<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片转换工具</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh; /* 使整个页面高度可用 */
            margin: 0; /* 移除默认的边距 */
            padding: 20px; /* 添加一些内边距 */
            box-sizing: border-box; /* 确保内边距不会增加总宽度 */
        }

        h1 {
            text-align: center; /* 标题居中 */
            margin-bottom: 50px; /* 与下方内容之间的间距 */
        }

        .container {
            display: flex;
            align-items: center; /* 垂直居中 */
            width: 100%; /* 设置宽度以应用内边距 */
            max-width: 800px; /* 限制最大宽度，防止过宽 */
        }

        .file-input {
            flex: 0 0 20%; /* 文件选择固定宽度 */
            text-align: center; /* 文本居中 */
        }

        .details {
            display: flex;
            flex-direction: column;
            flex: 1; /* 剩余空间 */
            align-items: flex-start; /* 文本对齐方式 */
        }

        .details > label {
            margin-bottom: 5px; /* 标签下方的外边距 */
        }

        .buttons {
            display: flex;
            flex-direction: column;
            flex: 0 0 20%; /* 按钮列固定宽度 */
            justify-content: space-between; /* 按钮垂直分布 */
        }

        /* 额外的样式 */
        input[type="file"], input[type="radio"], button {
            margin-right: 5px; /* 输入框与标签之间的间距 */
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var formatRadios = document.querySelectorAll('input[name="format"]');
            var sizeContainer = document.getElementById('sizeContainer');
            var convertButton = document.getElementById('convertButton');

            // 监听格式选择框的变化
            formatRadios.forEach(function(radio) {
                radio.addEventListener('change', function() {
                    if (this.value === 'bmp') {
                        sizeContainer.style.display = 'none'; // 隐藏大小选择框
                    } else {
                        sizeContainer.style.display = 'block'; // 显示大小选择框
                    }
                });
            });

            // 转换按钮点击事件
            convertButton.addEventListener('click', function() {
                var fileInput = document.getElementById('fileInput');
                var file = fileInput.files[0];
                var format = document.querySelector('input[name="format"]:checked').value;
                var sizeInput = document.querySelector('input[name="size"]:checked');
                var size = sizeInput ? sizeInput.value : '48'; // 如果sizeInput存在，则获取其值，否则使用默认值

                if (!file) {
                    alert('请先选择一个文件！');
                    return;
                }

                var formData = new FormData();
                formData.append('file', file);
                formData.append('type', format);
                formData.append('size', size); // 总是添加size参数，后端根据format处理

                uploadFile(formData);
            });

            // 文件上传函数
            function uploadFile(formData) {
                fetch('/api/image/convert', {
                    method: 'POST',
                    body: formData
                }).then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                }).then(data => {
                    if (data.err) {
                        alert('错误：' + data.err);
                        return;
                    }else {
                        // 设置下载链接和启用下载按钮的逻辑（如果有的话）
                        document.getElementById('downloadLink').href = '/api/image/download/' + data.dat + '?source=' +document.getElementById('fileInput').files[0].name ;
                        document.getElementById('downloadButton').disabled = false;
                        // document.getElementById('downloadLink').href = '/api/image/download/' + data.dat;
                        // document.getElementById('downloadButton').disabled = false;

                        // var downloadButton = document.getElementById('downloadButton');
                        // downloadButton.disabled = false; // 启用下载按钮
                        // downloadButton.href = '/api/image/download/' + data.dat + '&source=' + document.getElementById('fileInput')[0].name; // 假设后端返回了下载链接
                        // downloadButton.download = 'converted_file.ext'; // 设置下载文件名，ext为实际文件扩展名

                        // alert('文件转换成功！');
                    }
                }).catch(error => {
                    console.error('Error:', error);
                    alert('文件转换失败，请重试。' + decodeURIComponent(error));
                });
            }

            document.getElementById('downloadButton').addEventListener('click', function() {
                var downloadLink = document.getElementById('downloadLink');
                // 确保下载链接存在且有效
                if (downloadLink && downloadLink.href) {
                    // 模拟点击下载链接
                    downloadLink.click();
                    document.getElementById('downloadButton').disabled = true;
                } else {
                    alert('下载链接无效或不存在！');
                }
            });
        });

    </script>
</head>
<body >
    <h1>图片转换工具</h1>

    <div class="container">
        <div class="file-input">
                <input type="file" id="fileInput" accept="image/*">
        </div>

        <div class="details">
            <div>
                <label>类型:</label>
                <input type="radio" name="format" value="ico" checked> ico
                <input type="radio" name="format" value="bmp"> bmp
            </div>
            <div id="sizeContainer" >
                <label>大小:</label>
                <input type="radio" name="size" value="32" > 32x32
                <input type="radio" name="size" value="48" checked> 48x48
                <input type="radio" name="size" value="64"> 64x64
                <input type="radio" name="size" value="128"> 128x128
<!--                <input type="radio" name="size" value="256"> 256x256-->
            </div>
        </div>

        <div class="buttons">
            <button id="convertButton">转换</button>
            <br>
            <button id="downloadButton" disabled>下载</button>
            <a id="downloadLink" style="display: none;"></a>
        </div>
    </div>
</body>
</html>